<template>
  <div class="container">
    <h3 class="title">人力资源信息总览</h3>
    <Card title="全市劳动力数据总览" class="main">
      <el-row justify="center" align="middle" class="line_15">
        <dataCard :num="leftData.regNum.num" :label="leftData.regNum.label"></dataCard>
        <svg class="regSvg" width="100" height="70" xmlns="http://www.w3.org/2000/svg">
          <line x1="50" y1="0" x2="50" y2="70" stroke="white" stroke-width="2" />
        </svg>
      </el-row>
      <el-row justify="center" align="middle" class="line_10">
        <dataCard
          v-for="item in leftData.labNum"
          :key="item.label"
          :num="item.num"
          :label="item.label"
        ></dataCard>
        <svg class="labSvg" width="100" height="50" xmlns="http://www.w3.org/2000/svg">
          <line x1="50" y1="0" x2="50" y2="25" stroke="white" stroke-width="2" />
        </svg>
      </el-row>
      <el-row class="line_20" justify="center" align="middle">
        <el-col
          :span="10"
          v-for="item in leftData.employNum"
          :key="item.label"
          :num="item.num"
          :label="item.label"
        >
          <dataCard :num="item.num" :label="item.label" color="#f2aa00"></dataCard>
        </el-col>
        <svg class="employSvg" width="100" height="50" xmlns="http://www.w3.org/2000/svg">
          <line x1="50" y1="0" x2="50" y2="70" stroke="white" stroke-width="2" />
        </svg>
      </el-row>
      <el-row justify="center" align="middle" class="line_10">
        <dataCard
          v-for="item in leftData.fieldNum"
          color="#53d50f"
          :key="item.label"
          :num="item.num"
          :label="item.label"
        ></dataCard>
        <svg class="fieldSvg" width="100" height="50" xmlns="http://www.w3.org/2000/svg">
          <line x1="50" y1="0" x2="50" y2="35" stroke="white" stroke-width="2" />
        </svg>
      </el-row>
      <el-row justify="center" align="middle" class="line_10">
        <dataCard
          v-for="item in leftData.provinceNum"
          :key="item.label"
          :num="item.num"
          :label="item.label"
          color="#cbcb10"
        ></dataCard>
        <svg class="proSvg" width="100" height="50" xmlns="http://www.w3.org/2000/svg">
          <line x1="50" y1="0" x2="50" y2="30" stroke="white" stroke-width="2" />
        </svg>
      </el-row>
      <el-row class="line_20" justify="center" align="middle">
        <el-col
          :span="10"
          v-for="item in leftData.cityNum"
          :key="item.label"
          :num="item.num"
          :label="item.label"
        >
          <dataCard :num="item.num" :label="item.label"></dataCard>
        </el-col>
      </el-row>
    </Card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "LeftView",
});
</script>
<script setup lang="ts">
import Card from "./card.vue";
import dataCard from "./dataCard.vue";
import { leftViewStore } from "@/stores/left";
const storeData: any = leftViewStore();
let leftData = storeData.data;

</script>
<style scoped>
.title {
  font-size: 28px;
  font-weight: 600;
  line-height: 70px;
  height: 70px;
  margin-left: 24px;
  letter-spacing: 2px;
  color: rgb(63, 172, 232);
}
.container {
  height: 100%;
  width: 100%;
}
:deep(.card-container) {
  height: calc(100% - 70px);
  /* height: 100vh; */
  width: 100%;
}
.main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.line_15,
.line_20,
.line_10 {
  width: 100%;
}
.line_20,
.line_10 {
  margin-top: 5%;
  background-color: rgba(33, 59, 141, 0.3);
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
}
.line_25 {
  height: 25%;
}
.line_15 {
  height: 15%;
}
.line_20 {
  height: 20%;
}
.line_10 {
  height: 10%;
}
.regSvg,
.labSvg,
.employSvg,
.fieldSvg,
.proSvg {
  position: absolute;
  transform: translate(-50%, -50%);
}
.regSvg {
  top: 90%;
  left: 50%;
}
.labSvg {
  top: 125%;
  left: 50%;
}
.employSvg {
  top: 105%;
  left: 25%;
}
.fieldSvg {
  top: 120%;
  left: 50%;
}
.proSvg {
  top: 125%;
  left: 25%;
}
</style>
